<template>
    <div class="content"> 
      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <div class="data-title"><i class="el-icon-data-analysis" style="color: aqua;"></i>    经营数据</div>
          <div class="data-time">
            选择日期：
            <el-date-picker
              style="height: 30px;margin-right: 5px;"
              v-model="time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              @change="dateChange">
            </el-date-picker>
          </div>
        </div>
        <div class="card-one">
          <div class="card-one-item-1">
            <div class="card-one-title">
              <div class="card-one-order">今日订单总额(元)</div>
              <div class="card-one-money">{{ allMoney }}</div>
            </div>
            <div class="card-image">
              <img src="../../public/images/金额.png" alt="" /> 
            </div>
          </div>
          <div class="card-one-item-2">
            <div class="card-one-title">
              <div class="card-one-order">今日订单总数</div>
              <div class="card-one-money">{{ orderNum }}</div>
            </div>
            <div class="card-image">
              <img src="../../public/images/列表.png" alt="" /> 
            </div>
          </div>
          <div class="card-one-item-3">
            <div class="card-one-title">
              <div class="card-one-order">今日新增用户数</div>
              <div class="card-one-money">{{ userNum }}</div>
            </div>
            <div class="card-image">
              <img src="../../public/images/人群.png" alt="" /> 
            </div>
          </div>
          <div class="card-one-item-4">
            <div class="card-one-title">
              <div class="card-one-order">今日新增商户</div>
              <div class="card-one-money">{{ merchantNum }} </div>
            </div>
            <div class="card-image">
              <img src="../../public/images/添加用户.png" alt="" /> 
            </div>
          </div>
        </div>
      </el-card>
      <div class="card-02">
        <el-card class="box-card-1" shadow="always">
          <div slot="header" class="clearfix">
            <div class="data-title"><i class="el-icon-data-analysis" style="color: aqua;"></i>    订单统计</div>
          </div>
          <div
            class="echart"
            ref="mychart"
            id="mychart"
            >
          </div> 
        </el-card>
        <el-card class="box-card-2" shadow="always">
          <div slot="header" class="clearfix">
            <div class="data-title"><i class="el-icon-data-analysis" style="color: aqua;"></i>    救援任务统计</div>
          </div>
          <div
            class="echart-Pie"
            ref="myPie"
            id="myPie"
            >
          </div>
        </el-card>
        <el-card class="box-card-3" shadow="always">
          <div slot="header" class="clearfix">
            <div class="data-title"><i class="el-icon-data-analysis" style="color: aqua;"></i>    用户概况</div>
          </div>
          <div class="box-content">
            <div class="box-1">
              <div class="box-title">
                <div class="box-name">商户数</div>
                <img src="../../public/images/306问号-线性圆框.png">
              </div>
              <div class="box-num">{{ merchantNumAll }}</div>
            </div>
            <div class="box-1">
              <div class="box-title">
                <div class="box-name">用户数</div>
                <img src="../../public/images/306问号-线性圆框.png">
              </div>
              <div class="box-num">{{ userNumAll }}</div>
            </div>
            <div class="box-1">
              <div class="box-title">
                <div class="box-name">累计用户数</div>
                <img src="../../public/images/306问号-线性圆框.png">
              </div>
              <div class="box-num"> {{ userNumAll + merchantNumAll  }}</div>
            </div>
          </div>
        </el-card>   
      </div>
      <div class="card-3">
        <el-card class="box-card-4" shadow="always">
          <div class="card-box">
            <div class="card-title-3">注册用户分析</div>
              <div
                class="line"
                ref="myLine"
                id="myLine"
                >
              </div>
          </div>
        </el-card> 
      </div>
      
    </div>
</template>
<script>
import * as echarts from 'echarts';
import { userListDate , 
         userListAll , 
         orderListDate , 
         orderListCategory ,
         merchantListData,
         merchantListAll,
         rescueaList,
         userListTotalAll,
         OrderAndMerchantList
        } from "@/api/statistics/search";

// 饼状图
const option1 = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: '60%',
      top:35,
      y: 'center'
    },
    color: ['#5087ec', '#68bbc4','#fb8e0b','#ea1703','#f7d01e'],
    series: [
      {
        type: 'pie',
        radius: '50%',
        center: ["20%", "50%"], 
        // right:'0%',
        data: [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
        normal: {
          show: false,             // 是否显示标签[ default: false ]
        }
      },
      }
    ]
}

//救援任务
const option2 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: '60%',
    top:35,
    y: 'center'
  },
  color: ['#ea1703', '#68bbc4'],
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      center: ["30%", "50%"], 
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 15,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: []
    }
  ]
};

// 柱状图
const option3 = {
    tooltip:{
      tirgger:"axis",  // 触发方式
      axisPointer:{
        type:"shadow" // 默认为直线
      }
    },
    grid: {
      containLabel: true,
      left:20,
      top:20,
      right: 60,
      bottom: 30
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLabel: {
      interval: 0, // 强制显示所有标签
      rotate: -90, // 设置旋转角度
    },
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
      maxInterval: 10
    },
    visualMap: { 
      show:false,  
      dimension: 0, // 维度索引，0 ~ n-1
      inRange: {
        color: ['#5087ec']
      }
    },
    series: [
      {
      barWidth:12,
      data: [],
      type: 'bar'
    }
  ]
};

export default {

   data() {
      return {
        time:'',
        userNum:0, //用户数量
        userNumAll:0, //总的用户数量
        orderNum:0, //订单总数
        allMoney:0, //订单总金额,
        merchantNum:0, //当日注册商户数量
        merchantNumAll:0, //总的商户数量
      }
   },
   created(){
    this.userList();
    this.userListAll();
    this.orderListDate();
    this.merchantListByData();
    this.merchantListAll();
    this.test();
   },
   computed:{
   },
   mounted() {
    // 饼状图
    var chartDom = document.getElementById('mychart');
    var myChart = echarts.init(chartDom);
    
    orderListCategory().then(res=>{
      option1.series[0].data = res.rows?.map((item)=>({
          value: item.value,
          name: item.name
        })) || [];
        myChart.setOption(option1);
    });
    // 救援任务统计饼状图
    var chartDom = document.getElementById('myPie');
    var myPie = echarts.init(chartDom);
    rescueaList().then(res=>{
      option2.series[0].data = res.rows?.map((item)=> ({
          value: item.value,
          name: item.state == 0 ? '待处理' : '已处理'
        }));
        myPie.setOption(option2);
    })

    //柱状图
    var chartDom = document.getElementById('myLine');
    var myLine = echarts.init(chartDom);
    userListTotalAll().then(res=>{
      option3.xAxis.data = res.rows?.map((item)=>item.name);
      option3.series[0].data = res.rows?.map((item)=>item.value);
      myLine.setOption(option3);
    })
    

   },
   methods:{
    test(){
      OrderAndMerchantList().then(res=>{
        console.log(res,'1777777777777777777777777777777788')
      })
    },
    orderListDate(){
      orderListDate().then(res=>{
        console.log(res,'333333333333333333333333');
        // 当日总订单数
        this.orderNum = res.rows.length;
        // 当日总金额
        if(res.rows.length > 0){
          res.rows.forEach(item=>{
            this.allMoney += item.price;
          })
        }else{
          this.allMoney = 0;
        }
      })
    },
    userList(){
      userListDate().then(res=>{
        console.log(res.rows.length,'1111111111111111111111111111111111111111111');
        this.userNum = res.rows.length;
      })
    },
    userListAll(){
      userListAll().then(res=>{
        console.log(res,'2222');
        if(res.rows.length > 0){
          this.userNumAll = res.rows.length;
        }else{
          this.userNumAll = 0;          
        }
      })
    },
    // 根据商家注册时间查询商家列表
    merchantListByData(){
      merchantListData().then(res=>{
        if(res.rows.length > 0){
          this.merchantNum = res.rows.length;
        }else{
          this.merchantNumAll = 0;
        }
      })
    },
    // 根据商家总数
    merchantListAll(){
      merchantListAll().then(res=>{
        if(res.rows.length > 0){
          this.merchantNumAll = res.rows.length;
        }else{
          this.merchantNumAll = 0;
        }
      });
    },
    // 日期选择
    dateChange(e){
        console.log(e,'11111111111111111111111111111111')
        // 当日期框中没有值时 e为null
    }
   },
}
</script>
<style  scoped>
.data-title{
  height: 30px;
  line-height: 30px;
  float: left;
  font-size: 15px;
}
.data-time{
  float: right;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
/deep/.el-card__header{
  padding: 10px;
}
.box-card {
  width: 98%;
  margin: 10px auto;
}

/* 经营数据 */
.card-one{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.card-one-item-1{
  width: 20%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #34cc5f;
}
.card-one-title{
  margin: 0 10px;
  color: #ffffff;
  font-size: 15px;
}
.card-one-order,.card-one-money{
  margin: 10px 0;
}
.card-image > img{
  width: 40px;
  height: 40px;
  /* margin: auto 0; */
}
.card-one-item-2{
  width: 20%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #9150e8;
}
.card-one-item-3{
  width: 20%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #458efd;
}
.card-one-item-4{
  width: 20%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ff7823;
}
.card-02{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/* 卡片1 */
.box-card-1{
  width: 24%;
  height: 220px;
}
/* 卡片2 */
.box-card-2{
  width: 24%;
  height: 220px;
}
/* 卡片3 */
.box-card-3{
  width: 46%;
  height: 220px;
}
/* 图表 */
#mychart {
  width: 100%;
  height: 140px;
  /* margin-top: 50px; */
}
#myPie{
  width: 100%;
  height: 140px;
}
#myLine{
  width: 100%;
  height: 250px;
}

/* 注册用户分析 */
.box-card-4{
  width: 98%;
  height: 250px;
  margin: 10px auto;
  /* display: flex;
  justify-content: space-around; 
  align-items: center; */
}
.card-box{
  display: flex;
  padding: 0px;
}
.card-title-3{
  width: 1%;
  font-size: 15px;
  text-align: center;
  /* height: 150px; */
  /* padding-right: 20px; */
  /* border-right: 1px solid #e8e8e8; */
}


/* 用户概况 */
.box-content{
  width: 100%;
  height: 150px;
  /* background-color: red; */
  padding: 30px 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.box-1{
  width: 30%;
  height: 80px;
  border: 1px solid #e9e9e9;
  border-radius: 20px;
  padding: auto 10px;
}
.box-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 20px; 
  font-size: 15px;
}
.box-title > img{
  width: 15px;
  height: 15px;
}
.box-num{
  margin: 15px 20px; 
  font-size: 20px;
}
</style>


